<template>
  <div class="wrapper">
     <a-page-header title="快速开始" sub-title="开始你的快乐工作旅程吧！" class="wrapper-header"/>
    <a-row :gutter="[16, 16]" wrap>
      <a-col :span="4"
             v-for="item in routes"
             :key="item.path">
        <a-card size="small" class="quick-card">
          <router-link :to="item.path"
                       class="quick-link">
            <span class="quick-avatar">
              <component :is="item.meta?.icon"
                         class="quick-icon" />
            </span>
            <span class="quick-title">{{ item.meta?.title }}</span>
          </router-link>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import routes from '@/router/routes'
</script>

<style scoped>
.quick-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(0, 0, 0, .85);
  font-size: 16px;
  font-weight: 500;
  width: 100%;
}

.quick-link:hover {
  color: #1890ff;
  cursor: pointer;
  transition: all .3s;
}

.quick-icon {
  font-size: 16px;
}

.quick-avatar {
  display: inline-flex;
  width: 36px;
  height: 36px;
  background-color: #f5f5f5;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
}
.quick-link:hover .quick-avatar{
  background-color: #e6f4ff;
  transition: all .3s;
}
.quick-card:hover{
  border-color: #91caff;
  transition: all .3s;
}
</style>